<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下拉刷新与上拉加载</title>
    <link rel="stylesheet" href="css/app.css" />
  </head>
  <body>
    <div class="app-header">
      <div class="app-header-title">下拉刷新和上拉加载</div>
    </div>

    <div class="app-main" style="padding-bottom: 0;">
      <div class="app-container" data-app-init="pullRefresh">
        <div class="app-scroller">
          <!-- 列表内容 -->
          <div class="app-list"></div>
        </div>
      </div>
    </div>

    <script src="js/app.js"></script>
    <script>
      app.init({
        refresh: {
          container: document.querySelector(".app-container"),
          pullRefresh: true,
          pullLoad: true,
        },
      });

      app.pullRefresh.init(document.querySelector(".app-container"), {
        onRefresh: async () => {
          // 实际刷新逻辑
          console.log("刷新");
          setTimeout(() => {
            app.pullRefresh.endPullRefresh(true);
          }, 2000);
        },
        onLoadMore: async () => {
          // 实际加载更多逻辑
          console.log("加载更多");
          setTimeout(() => {
            app.pullRefresh.endPullLoad(true);
          }, 1000);
        },
      });

      // 模拟数据
      const data = [
        { id: 1, text: "Item 1" },
        { id: 2, text: "Item 2" },
        { id: 3, text: "Item 3" },
        { id: 4, text: "Item 4" },
        { id: 5, text: "Item 5" },
        { id: 6, text: "Item 6" },
        { id: 7, text: "Item 7" },
        { id: 8, text: "Item 8" },
        { id: 9, text: "Item 9" },
        { id: 10, text: "Item 10" },
        { id: 11, text: "Item 11" },
        { id: 12, text: "Item 12" },
        { id: 13, text: "Item 13" },
        { id: 14, text: "Item 14" },
        { id: 15, text: "Item 15" },
        { id: 16, text: "Item 16" },
        { id: 17, text: "Item 17" },
        { id: 18, text: "Item 18" },
        { id: 19, text: "Item 19" },
        { id: 20, text: "Item 20" },
        { id: 21, text: "Item 21" },
        { id: 22, text: "Item 22" },
        { id: 23, text: "Item 23" },
        { id: 24, text: "Item 24" },
        { id: 25, text: "Item 25" },
        { id: 26, text: "Item 26" },
        { id: 27, text: "Item 27" },
        { id: 28, text: "Item 28" },
        { id: 29, text: "Item 29" },
        { id: 30, text: "Item 30" },
        { id: 31, text: "Item 31" },
        { id: 32, text: "Item 32" },
        { id: 33, text: "Item 33" },
        { id: 34, text: "Item 34" },
        { id: 35, text: "Item 35" },
        { id: 36, text: "Item 36" },
        { id: 37, text: "Item 37" },
        { id: 38, text: "Item 38" },
      ];

      renderList();

      function renderList() {
        const list = document.querySelector(".app-list");
        list.innerHTML = "";
        data.forEach((item) => {
          const itemEl = document.createElement("div");
          itemEl.classList.add("app-item");
          itemEl.textContent = item.text;
          list.appendChild(itemEl);
        });
      }
    </script>
  </body>
</html>
